import React,{Component,Suspense} from 'react';
import loading from '../assets/loading.gif'
import {Switch,Route,Redirect} from 'react-router-dom'



class RouterView extends Component {
    render() {
        var {routes} = this.props;
        //过滤路由表中的 普通路由
        var normalRoutes = routes.filter((item)=>{
            return item.path && item.component;
        })
        //过滤路由表中的重定向路由
        var redirectRoutes = routes.filter((item)=>{
            return item.redirect;
        })
        //过滤路由表中的404路由
        var notfoundRoutes = routes.filter((item)=>{
            return item.component && !item.path
        })
        return (
            <div>
               <Suspense fallback={<img className='com_loading' src={loading} />}>
                   <Switch>
                    {
                        normalRoutes.map((item,index)=>{
                            return (
                                <Route key={index} exact={item.exact || false} path={item.path} render={(props)=>{
                                    if(item.children && item.children.length > 0){
                                        return <item.component {...props} routes={item.children}></item.component>
                                    }else{//没有子路由
                                        return<item.component {...props}></item.component>
                                    }
                                }}> 
                                </Route>
                            )
                        })
                    }
                    {
                        redirectRoutes.map((item,index)=>{
                            return(
                                <Redirect key={index} exact from={item.from} to={item.to}></Redirect>
                            )
                        })
                    }
                    {
                       notfoundRoutes.map((item,index)=>{
                        return (
                            <Route key={index} component={item.component}></Route>
                        )
                       })
                    }
                   </Switch>
                </Suspense> 
            </div>
        );
    }
}

export default RouterView;